<!--
 * @Author: Bennty
 * @Date: 2024-11-06 10:10:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-07 17:03:17
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <transition
            :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave"
        >
            <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
                    <el-form-item label="选择日期" prop="createTime">
                        <el-date-picker v-model="queryParams.createTime" placeholder="制单日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="模糊搜索" prop="bomName">
                        <el-input type="text" v-model="queryParams.bomName" placeholder="模糊搜索" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="success" plain icon="Plus" @click="handleClickAdd">新增</el-button>
                    </el-col>
                </el-row>
            </template>
            <el-table :data="productOrderList">
                <el-table-column label="制单人" width="120px" prop="createByName" align="center"></el-table-column>
                <el-table-column label="制单日期" prop="createTime" width="95px" align="center"></el-table-column>
                <el-table-column label="交货日期" width="95px" align="center">
                    <template #default="scope">
                        <span :class="(nowTimeStamp -new Date(scope.row.deliveryDate.split(' ')[0]).getTime())/1000/60*60*24 > 3? 'alert':'not-alert'"> {{ scope.row.deliveryDate }} </span>
                    </template>
                </el-table-column>
                <el-table-column label="客户名称" prop="customerName" width="200px" align="center"></el-table-column>
                <el-table-column label="产品名称" prop="bomName" width="200px" align="center"></el-table-column>
                <el-table-column label="订单数量" prop="produceNumber" width="150px" align="center"></el-table-column>
                <el-table-column label="单价" width="95px" align="center">
                    <template #default="scope">
                        {{ `￥${scope.row.price}` }}
                    </template>
                </el-table-column>
                <el-table-column label="订单金额" width="150px" align="center">
                    <template #default="scope">
                        {{ `￥${scope.row.orderAmount}` }}
                    </template>
                </el-table-column>
                <el-table-column label="发货设置" width="150px" align="center">
                    <template #default="scope">
                        <span class="warning" v-if="scope.row.deliverySetting == '1'">{{ outlet_setting.filter((item:any)=>scope.row.deliverySetting == item.value)[0].label }}</span>
                        <span class="alert" v-else-if="scope.row.deliverySetting == '2'">{{ outlet_setting.filter((item:any)=>scope.row.deliverySetting == item.value)[0].label }}</span>
                        <span class="normal" v-else-if="scope.row.deliverySetting == '3'">{{ outlet_setting.filter((item:any)=>scope.row.deliverySetting == item.value)[0].label }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                <el-table-column label="操作" width="150px" align="center">
                    <template #default="scope">
                        <el-tooltip content="编辑" placement="top">
                            <el-button link :style="{fontSize:'15px'}" type="primary" icon="Edit" @click="handleClickEdit(scope.row)" ></el-button>
                        </el-tooltip>
                        <el-tooltip content="下生产单">
                            <el-button link :style="{fontSize:'15px'}" type="warning" icon="Document" @click="handleClickPlaceOrder(scope.row)" ></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除">
                            <el-button link :style="{fontSize:'15px'}" type="danger" icon="Delete" @click="handleClickDelete(scope.row)" ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getProductOrderList" />
        </el-card>
        <addProductOrder :visible="addProductOrderVisible" :initForm="form" :settings="outlet_setting" @submit="handleSubmit" @close="handleCloseAdd" />
        <editProductOrder :visible="editProductOrderVisible" :initForm="form" :settings="outlet_setting" :data="orderDetail" @submit="handleSubmit" @close="handleCloseEdit" />
        <placeOrder :visible="placeOrderVisible" :initForm="form" :settings="outlet_setting" :data="orderDetail" @submit="handleSubmit" @close="handleClosePlaceOrder"/>
    </div>
</template>

<script setup lang="ts">
import { ProductOrderFormType,QueryProductOrderType,ProductOrderVO } from '@/api/sj/productManagement/productOrder/types';
import { type FormInstance } from 'element-plus';
import { getProductOrderListApi,getOrderDetailByIdApi, deleteProductOrderApi } from '@/api/sj/productManagement/productOrder';
import addProductOrder from './components/addProductOrder.vue';
import editProductOrder from './components/editProductOrder.vue';
import placeOrder from './components/placeOrder.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { outlet_setting } = toRefs<any>(proxy?.useDict('outlet_setting'));
const queryFormRef = ref<FormInstance>();

const nowTimeStamp = ref<number>(new Date().getTime());
const initForm:ProductOrderFormType = {
    customerId: undefined,
    deliveryDate: undefined,
    bomId: undefined,
    produceNumber: undefined,
    deliverySetting: undefined,
    remark: undefined
};
const data = reactive<pageDataExcludeRuses<ProductOrderFormType,QueryProductOrderType>>({
    form: {...initForm},
    queryParams: {
        pageNum: 1,
        pageSize: 30,
        createTime: undefined,
        bomName: undefined
    }
});
const { form, queryParams } = toRefs(data);
const productOrderList = ref<ProductOrderVO[]>([]);
const totalData = ref(0);
const loading = ref(false);
const orderDetail = ref<ProductOrderVO>();
const addProductOrderVisible = ref(false);
const editProductOrderVisible = ref(false);
const placeOrderVisible = ref(false);


const getProductOrderList = async () => {
    loading.value = true;
    const { rows, total } = await getProductOrderListApi(queryParams.value);
    productOrderList.value = rows;
    totalData.value = total;
    loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getProductOrderList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

const handleSubmit = (result: boolean) => {
    if(result){
        getProductOrderList();
    };
};

/** 点击新增生产订单 */
const handleClickAdd = () => {
    addProductOrderVisible.value = true;
};

const handleCloseAdd = () => {
    addProductOrderVisible.value = false;
};

/** 点击编辑生产订单 */
const handleClickEdit = async (row: ProductOrderVO) => {
    const orderInfo = await getOrderDetailByIdApi(row.id);
    if(orderInfo.code == 200){
        orderDetail.value = orderInfo.data;
        editProductOrderVisible.value = true;
    };
};

const handleCloseEdit = () => {
    editProductOrderVisible.value = false;
};

/** 点击下生产单 */
const handleClickPlaceOrder = async (row: ProductOrderVO) => {
    const orderInfo = await getOrderDetailByIdApi(row.id);
    if(orderInfo.code == 200){
        orderDetail.value = orderInfo.data;
        placeOrderVisible.value = true;
    };
};

const handleClosePlaceOrder = () => {
    placeOrderVisible.value = false;
};

/** 点击删除生产单 */
const handleClickDelete = async (row: ProductOrderVO) => {
    await proxy?.$modal.confirm("确认要删除此生产单？");
    const { code } = await deleteProductOrderApi(row.id);
    if(code == 200){
        proxy?.$modal.msgSuccess("删除生产单成功！");
        getProductOrderList();
    };
};

onMounted(()=>{
    getProductOrderList();
})

</script>

<style lang="scss" scoped>

</style>